/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="crossImg">
    <div v-show="isShowState">
      <div class="stateText">
        <div style="border:0px solid red;float:right;">
          {{stateName }}
        </div>
      </div>
    </div>
    <div v-show="isShowMode">
      <div class="controlText">
        <div style="border:0px solid red;float:right;">
          {{controlName }}
        </div>
      </div>
      <div class="modeText">
        {{modeName }}
      </div>
    </div>
    <!-- 右行道路 B-->
    <div class="right-dir-road" v-if="roadDir === 'right'">
      <div class="centerText" v-if="crossType !== 'Customroads' && isHasPhase">
      <!-- 相位倒计时 -->
      <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && isHasPhase && isHasCountdown" :class="{'countdownBg': isLoaded}">
        <div v-for="curPhase in phaseCountdownList" :key="curPhase.id" :style="{color: curPhase.phaseCountdownColor}">
          <div v-if="curPhase.phaseCountdown !== undefined && curPhase.phaseCountdown !== -1" style="overflow: hidden;margin-bottom: 4px;">
            <span style="float: left;width: 42px;height: 42px;position: relative;border: 1px solid rgba(255, 255, 255, 0.1);margin-right: 5px;">
              <xdr-dir-selector :Data="xdrData" :Datas="xdrpedData" Width="55px" Height="55px" Widths="55px" Heights="55px" :showlist="curPhase.showlist" :roadDirection="roadDirection"></xdr-dir-selector>
            </span>
            <span style="float: left;color: #fff;margin-right: 8px;width: 30px;">P{{curPhase.id}}:</span>
            <span style="float: left;font-size: 25px;">{{curPhase.phaseCountdown}}</span>
          </div>
        </div>
      </div>
      <!-- 手动刷新 -->
      <div v-if="!isLoaded">
        <RefreshSvg @click.native="refresh"/>
        <span class="text">{{$t('openatccomponents.overview.getintersectionmapagain')}}</span>
      </div>
    </div>
      <!-- 路口底图 -->
      <div class="baseImg">
        <!-- 城市道路 -->
        <CrossRoadsSvg v-if="crossType === 'Crossroads'"/>
        <TShapeEastRoadsSvg v-if="crossType === 'TypeT-east'"/>
        <TShapeWestRoadsSvg v-if="crossType === 'TypeT-west'"/>
        <TShapeNorthRoadsSvg v-if="crossType === 'TypeT-north'"/>
        <TShapeSouthRoadsSvg v-if="crossType === 'TypeT-south'"/>
        <!-- 其他路口 -->
        <CustomRoadsSvg v-if="crossType === 'Customroads'"/>
        <!-- 匝道 -->
        <RampEastRoadsSvg v-if="crossType === 'ramp-east' && !isVipRoute" />
        <RampWestRoadsSvg v-if="crossType === 'ramp-west' && !isVipRoute" />
        <RampNorthRoadsSvg v-if="crossType === 'ramp-north' && !isVipRoute" />
        <RampSouthRoadsSvg v-if="crossType === 'ramp-south' && !isVipRoute" />
        <!-- 路段行人过街 -->
        <PedSectionSNSvg v-if="crossType === 'ped-section-south-north'" />
        <PedSectionEWSvg v-if="crossType === 'ped-section-east-west'" />
      </div>
      <!-- 城市道路状态-->
      <div v-if="mainType === '100' || mainType === '101' || mainType === '104'">
        <!-- 人行道 -->
        <div class="sidewalk" id="sidewalk" v-if="resetflag && isLoaded">
          <SidewalkClickSvg v-if="isVipRoute && compSidewalkPhaseData.length" :Data="compSidewalkPhaseData" :clickMode="clickMode" @handleClickSidewalkIcon="handleClickSidewalkIcon" />
          <SidewalkSvg v-else v-for="(side, index) in compSidewalkPhaseData" :key="side.key + '-' + index" :Data="side" :crossType="crossType" />
        </div>
        <!-- 车道相位 -->
        <div v-if="resetflag" class="phaseIcon">
          <PhaseIconSvg v-for="(item, index) in compLanePhaseData" :key="item.key + '-' + index" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon" />
        </div>
         <!-- 公交相位 -->
        <div v-if="resetflag && !isVipRoute" class="busIcon">
          <BusMapSvg v-for="(item, index) in comdireBusPhaseData" :key="'Busmap-' + item.key + '-' + index" :Data="item" />
          <PhaseIconSvg v-for="(item, index) in comdireBusPhaseData" :key="item.key + '-' + index" :Data="item"/>
        </div>
      </div>
      <!-- 匝道状态 -->
        <!-- 车道相位 -->
      <div v-if="resetflag && mainType === '103' && !isVipRoute">
        <RampPhaseIconSvg v-for="(item, index) in LanePhaseData" :key="item.key + '-' + index" :Data="item" />
      </div>
    </div>
    <!-- 右行道路 E-->

    <!-- 左行道路 B-->
    <div class="left-dir-road" v-if="roadDir === 'left'">
      <div class="centerText" v-if="crossType !== 'Customroads' && isHasPhase">
        <!-- 相位倒计时 -->
        <div class="phaseCountdown" v-show="isShowInterval" v-if="isLoaded && isHasPhase && isHasCountdown" :class="{'countdownBg': isLoaded}">
          <div v-for="curPhase in phaseCountdownList" :key="curPhase.id" :style="{color: curPhase.phaseCountdownColor}">
            <div v-if="curPhase.phaseCountdown !== undefined && curPhase.phaseCountdown !== -1" style="overflow: hidden;margin-bottom: 4px;">
              <span style="float: left;width: 42px;height: 42px;position: relative;border: 1px solid rgba(255, 255, 255, 0.1);margin-right: 5px;">
                <xdr-dir-selector :Data="xdrData" :Datas="xdrpedData" Width="55px" Height="55px" Widths="55px" Heights="55px" :showlist="curPhase.showlist" :roadDirection="roadDirection"></xdr-dir-selector>
              </span>
              <span style="float: left;color: #fff;margin-right: 8px;width: 30px;">P{{curPhase.id}}:</span>
              <span style="float: left;font-size: 25px;">{{curPhase.phaseCountdown}}</span>
            </div>
          </div>
        </div>
        <!-- 手动刷新 -->
        <div v-if="!isLoaded">
          <RefreshSvg @click.native="refresh"/>
          <span class="text">{{$t('openatccomponents.overview.getintersectionmapagain')}}</span>
        </div>
      </div>
      <!-- 路口底图 -->
      <div class="baseImg">
        <!-- 城市道路 -->
        <LCrossRoadsSvg v-if="crossType === 'Crossroads'"/>
        <LTShapeEastRoadsSvg v-if="crossType === 'TypeT-east'"/>
        <LTShapeWestRoadsSvg v-if="crossType === 'TypeT-west'"/>
        <LTShapeNorthRoadsSvg v-if="crossType === 'TypeT-north'"/>
        <LTShapeSouthRoadsSvg v-if="crossType === 'TypeT-south'"/>
        <!-- 其他路口 -->
        <CustomRoadsSvg v-if="mainType !== '100' && mainType !== '101'"/>
      </div>
      <!-- 城市道路状态-->
      <div v-if="mainType === '100' || mainType === '101'">
        <!-- 人行道 -->
        <div class="sidewalk" v-if="resetflag && isLoaded">
          <SidewalkClickSvg v-if="isVipRoute && compSidewalkPhaseData.length" :Data="compSidewalkPhaseData" :clickMode="clickMode" @handleClickSidewalkIcon="handleClickSidewalkIcon" />
          <SidewalkSvg v-else v-for="side in compSidewalkPhaseData" :key="side.key" :Data="side" :crossType="crossType" />
        </div>
        <!-- 车道相位 -->
        <div v-if="resetflag" class="phaseIcon">
          <LPhaseIconSvg v-for="item in compLanePhaseData" :key="item.key" :Data="item" :isVipRoute="isVipRoute" :clickMode="clickMode" @handleClickPhaseIcon="handleClickPhaseIcon"/>
        </div>
         <!-- 公交相位 -->
        <div v-if="resetflag" class="busIcon">
          <BusMapSvg v-for="(item, index) in comdireBusPhaseData" :key="'Busmap-' + item.key + '-' + index" :Data="item" />
          <LPhaseIconSvg v-for="(item, index) in comdireBusPhaseData" :key="item.key + '-' + index" :Data="item"/>
        </div>
      </div>
    </div>
    <!-- 左行道路 E-->
  </div>
</template>
<script>
import PhaseIconSvg from './phaseIcon/phaseIconSvg'
import PhaseDataModel from './utils.js'
import { getIntersectionInfo } from '../../../../api/template.js'
import { uploadSingleTscParam } from '../../../../api/param.js'
import CrossRoadsSvg from './baseImg/CrossRoadsSvg'
import TShapeEastRoadsSvg from './baseImg/TShapeEastRoadsSvg'
import TShapeWestRoadsSvg from './baseImg/TShapeWestRoadsSvg.vue'
import TShapeNorthRoadsSvg from './baseImg/TShapeNorthRoadsSvg.vue'
import TShapeSouthRoadsSvg from './baseImg/TShapeSouthRoadsSvg.vue'
import CustomRoadsSvg from './baseImg/CustomRoadsSvg.vue'
import RefreshSvg from './baseImg/refreshSvg'
import SidewalkSvg from './baseImg/SidewalkSvg'
import SidewalkClickSvg from './baseImg/SidewalkClickSvg'
import RampEastRoadsSvg from './baseImg/RampEastSvg'
import RampWestRoadsSvg from './baseImg/RampWestSvg'
import RampNorthRoadsSvg from './baseImg/RampNorthSvg'
import RampSouthRoadsSvg from './baseImg/RampSouthSvg'
import RampPhaseIconSvg from './phaseIcon/rampPhaseIconSvg'
import PedSectionEWSvg from './baseImg/PedSectionEWSvg'
import PedSectionSNSvg from './baseImg/PedSectionSNSvg'
// import { mapState } from 'vuex'
import LCrossRoadsSvg from './baseImg/leftroad/LCrossRoadsSvg'
import LTShapeEastRoadsSvg from './baseImg/leftroad/LTShapeEastRoadsSvg'
import LTShapeWestRoadsSvg from './baseImg/leftroad/LTShapeWestRoadsSvg.vue'
import LTShapeNorthRoadsSvg from './baseImg/leftroad/LTShapeNorthRoadsSvg.vue'
import LTShapeSouthRoadsSvg from './baseImg/leftroad/LTShapeSouthRoadsSvg.vue'
import LPhaseIconSvg from './phaseIcon/LphaseIconSvg'
import CrossDiagramMgr from '../../../../EdgeMgr/controller/crossDiagramMgr.js'
import BusMapSvg from './busIcon/busMapSvg'
import { getMessageByCode } from '../../../../utils/responseMessage.js'

import CrossDirectionConflictList from '../../../../utils/conflictList.js'

export default {
  name: 'crossDiagram',
  components: {
    PhaseIconSvg,
    CrossRoadsSvg,
    TShapeEastRoadsSvg,
    TShapeWestRoadsSvg,
    TShapeNorthRoadsSvg,
    TShapeSouthRoadsSvg,
    CustomRoadsSvg,
    RefreshSvg,
    SidewalkSvg,
    RampEastRoadsSvg,
    RampWestRoadsSvg,
    RampNorthRoadsSvg,
    RampSouthRoadsSvg,
    RampPhaseIconSvg,
    PedSectionEWSvg,
    PedSectionSNSvg,
    LCrossRoadsSvg,
    LTShapeEastRoadsSvg,
    LTShapeWestRoadsSvg,
    LTShapeNorthRoadsSvg,
    LTShapeSouthRoadsSvg,
    LPhaseIconSvg,
    BusMapSvg,
    SidewalkClickSvg
  },
  props: {
    crossStatusData: {
      type: Object
    },
    agentId: {
      type: String
    },
    // devStatus: {
    //   type: Number
    // },
    isShowInterval: {
      type: Boolean,
      devault: true
    },
    roadDirection: {
      type: String
    },
    isShowState: {
      type: Boolean,
      devault: false
    },
    isShowMode: {
      type: Boolean,
      devault: false
    },
    modeName: {
      type: String,
      default: ''
    },
    controlName: {
      type: String,
      default: ''
    },
    stateName: {
      type: String,
      default: ''
    },
    choosedDirection: {
      type: Array,
      default: () => []
    },
    choosedPedDirection: {
      type: Array,
      default: () => []
    },
    isVipRoute: { // 区分普通路口和VIP路口，如果是vip路口（特勤路线和分组管控），才需要获取通道和处理通道冲突，并显示已选方向
      type: Boolean,
      default: false
    },
    clickMode: {
      type: Boolean,
      default: false
    },
    isThirdSignal: {
      type: Boolean,
      default: false
    },
    channelType: {
      type: Boolean,
      default: false
    }
  },
  // computed: {
  //   ...mapState({
  //     roadDirection: state => state.globalParam.roadDirection
  //   })
  // },
  watch: {
    tempType: {
      handler: function (val) {
        this.getCrossType()
      }
    },
    crossStatusData: {
      handler: function (val, oldVal) {
        // 路口状态数据
        this.statusData = JSON.parse(JSON.stringify(val))
        // 默认显示相位数据（包括黄闪、全红、关灯状态下，或者匝道，均不做比对跟随相位的处理）
        this.drawDefaultPhaseIcon()
        if (this.channelType && !this.isThirdSignal) {
          // 通道路口图状态数据（实时通道展示排除第三方信号机，第三方信号机还是按模版路口一样展示相位状态）
          this.channelStatusList = val.channellamp
          this.createChannelStatusMap()
          this.getChannelPhaseStatus()
          this.getChannelPedStatus()
          return
        }
        this.handleTempCrossStatus(val)
      },
      // 深度观察监听
      deep: true
    },
    devStatus: {
      handler: function (val) {
        if (val === 3) return
        this.handleDefaultStatus()
      }
    },
    // roadDirection: {
    //   handler: function (val1, val2) {
    //     if (val1 !== val2) {
    //       this.init()
    //     }
    //   }
    // },
    agentId: {
      handler: function (val1, val2) {
        if (val1 !== val2) {
          this.init()
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      roadDir: 'right', // 道路行车方向，默认右行
      phaseCountdownList: [], // 相位倒计时列表
      statusData: null, // 信号机状态
      LanePhaseData: [], // 车道相位数据
      overlapLanePhaseData: [], // 车道跟随相位数据
      curPhase: [], // 当前相位列表
      phaseStatusList: [], // 相位状态列表
      phaseStatusMap: new Map(), // 相位状态映射
      overlapPhaseStatusMap: new Map(), // 跟随相位状态映射
      ColorMap: new Map([[0, '#828282'], [1, '#ff2828'], [2, '#f7b500'], [3, '#77fb65'], [4, '#77fb65'], [5, '#f7b500']]), // 当前相位状态 --- 0：关灯, 1：红, 2：黄,  3：绿, 4：绿闪, 5：黄闪
      SidewalkColorMap: new Map([[0, '#828282'], [1, '#e24b4b'], [3, '#7bd66b']]),
      tempType: '', // 模版类型
      mainType: '101', // 路口形状
      mainDirection: '000', // 路口方向
      crossType: '', // 路口底图类型
      isLoaded: false, // 是否成功加载底图
      isHasPhase: true, // 是否有相位状态数据
      phaseControlColorMap: new Map([['全红', '#ff2828'], ['关灯', '#828282'], ['默认', '#fff'], ['方向锁定', '#fff']]),
      sidewalkPhaseData: [], // 行人相位
      overlapsidewalkPhaseData: [], // 行人跟随相位
      resetflag: true, // 离线后，控制行人相位、车道相位reset标识
      compLanePhaseData: [], // 对比车道相位和车道跟随相位后，显示的数据
      compSidewalkPhaseData: [], // // 对比行人相位和车道跟随相位后，显示的数据
      comdirePhaseData: [], // 对比相同方向车道相位数据后，被删减的唯一direction的数组
      comdireOverlapPhaseData: [], // 对比相同方向车道跟随相位数据后，被删减的唯一direction的数组
      busPhaseData: [], // 公交相位数据
      comdireBusPhaseData: [], //  对比相同方向公交车道数据后，被删减的唯一direction的数组
      channelStatusMap: new Map(), // 通道实时状态映射
      channelStatusList: [], // 通道实时状态列表
      phaseDirMap: new Map(),
      xdrData: {
        left: '5px',
        top: '4px'
      },
      xdrpedData: {
        left: '1px',
        top: '1px'
      },
      isHasCountdown: false
    }
  },
  methods: {
    handleTempCrossStatus (val) {
      // 模版路口图状态数据
      this.phaseStatusList = val.phase
      this.overlapStatusList = val.overlap
      if (val.control === 1 || val.control === 2 || val.control === 3) {
        // 黄闪、全红、关灯属于特殊控制，优先级最高，直接改变灯色，不用判断phase里的type，也不需要考虑跟随相位的灯色优先级
        if (val.control === 1) {
          this.getYellowFlashColor()
        } else {
          this.SpecialControl(val)
        }
        this.isHasPhase = false
        return
      }
      if (!val.phase && !this.overlapStatusList) {
        // 非特殊控制，相位和跟随相位不存在的情况下，灯色恢复默认
        this.handleSpecialControlStatus('默认')
        this.isHasPhase = false
        return
      }
      if (val.control === 16) {
        // 方向锁定时，相位状态显示与通道无关，显示接口返回的红灯会有歧义，此处特殊处理显示默认白色
        this.handleSpecialControlStatus('方向锁定')
        this.isHasPhase = false
        return
      }
      this.curPhase = val.current_phase
      this.isHasPhase = true
      this.createPhaseStatusMap()
      // 正常情况下，获取车道相位、车道跟随相位、相位倒计时、行人相位、行人跟随相位 的状态
      this.getPhaseStatus()
      this.getOverlapPhaseStatus()
      this.getCurPhaseCountdown()
      this.getBusPhaseStatus()
      if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
        // 城市道路和路段行人过街才显示人行道状态
        this.getpedStatus()
        this.getOverlapPedStatus()
        // 算法对比行人相位与行人跟随相位的状态
        this.comparePedStatus()
        // 算法对比车道相位与车道跟随相位的状态
        this.comparePhaseStatus()
      }
      // console.log('this.phaseStatusMap 相位状态映射', this.phaseStatusMap)
      // console.log('LanePhaseData 车道相位', this.LanePhaseData)
      // console.log('sidewalkPhaseData 行人相位', this.sidewalkPhaseData)
      // console.log('overlapPhaseStatusMap 跟随相位状态映射', this.overlapPhaseStatusMap)
      // console.log('overlapLanePhaseData 车道跟随相位', this.overlapLanePhaseData)
      // console.log('this.overlapsidewalkPhaseData 行人跟随相位', this.overlapsidewalkPhaseData)
    },
    init () {
      this.CrossDiagramMgr = new CrossDiagramMgr()
      this.getRoadDirection()
      this.PhaseDataModel = new PhaseDataModel(this.roadDirection)
      this.getIntersectionInfo() // 获取路口信息
    },
    drawDefaultPhaseIcon () {
      this.compLanePhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type', 'nostatus')))
      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype', 'nostatus')))
      this.comdireBusPhaseData = JSON.parse(JSON.stringify(this.busPhaseData))
      console.log(this.LanePhaseData)
      console.log(this.overlapLanePhaseData)
      console.log('###################', this.compLanePhaseData)
    },
    comparePhaseStatus () {
      // 对比车道： 跟随相位和相位的状态数据（此处判断是为了保证被比较的数据direction都是唯一的）
      if (!this.comdirePhaseData && !this.comdireOverlapPhaseData) {
        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type')
      } else if (!this.comdireOverlapPhaseData) {
        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.comdirePhaseData, this.overlapLanePhaseData, 'type')
      } else if (!this.comdirePhaseData) {
        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.comdireOverlapPhaseData, 'type')
      } else {
        this.compLanePhaseData = this.CrossDiagramMgr.compare(this.comdirePhaseData, this.comdireOverlapPhaseData, 'type')
      }
    },
    comparePedStatus () {
      // 对比人行道： 跟随相位和相位的状态数据
      this.compSidewalkPhaseData = this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype')
    },
    resetPhaseStatus () {
      // 车道相位、行人相位恢复默认状态
      this.resetflag = false
      this.$nextTick(() => {
        this.resetflag = true
      })
    },
    SpecialControl (data) {
      switch (data.control) {
        case 2: this.handleSpecialControlStatus('全红')
          break
        case 3: this.handleSpecialControlStatus('关灯')
          break
        default: this.handleSpecialControlStatus('默认')
      }
    },
    handleDefaultStatus () {
      // 恢复默认状态
      if (this.compLanePhaseData.length) {
        this.phaseCountdown = ''
        this.phaseCountdownColor = '#fff'
        this.compLanePhaseData.forEach(data => {
          data.color = '#fff'
        })
      }
      if (this.compSidewalkPhaseData.length) {
        this.compSidewalkPhaseData.forEach(data => {
          data.color = '#fff'
        })
      }
      if (this.comdireBusPhaseData.length) {
        this.comdireBusPhaseData.forEach(data => {
          data.color = '#fff'
        })
      }
      this.phaseCountdownList = []
      this.resetPhaseStatus()
    },
    handleSpecialControlStatus (Control) {
      this.resetPhaseStatus()
      // 控制黄闪、全红、关灯、默认情况下的车道相位颜色和倒计时颜色
      if (Control === '默认') {
        // 倒计时恢复默认颜色
        this.phaseCountdownList.forEach(item => {
          item.phaseCountdown = ''
          item.id = ''
          item.phaseCountdownColor = '#fff'
        })
      }
      if (this.compLanePhaseData.length) {
        const compLanePhaseData = this.compLanePhaseData.map(data => ({
          ...data,
          color: this.phaseControlColorMap.get(Control)
        }))
        this.compLanePhaseData = JSON.parse(JSON.stringify(compLanePhaseData))
      }
      if (this.compSidewalkPhaseData.length) {
        const compSidewalkPhaseData = this.compSidewalkPhaseData.map(data => ({
          ...data,
          color: this.phaseControlColorMap.get(Control)
        }))
        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(compSidewalkPhaseData))
      }
      if (this.comdireBusPhaseData.length) {
        const comdireBusPhaseData = this.comdireBusPhaseData.map(data => ({
          ...data,
          color: this.phaseControlColorMap.get(Control)
        }))
        this.comdireBusPhaseData = JSON.parse(JSON.stringify(comdireBusPhaseData))
      }
      if (this.mainType === '103') {
        if (this.LanePhaseData.length) {
          const LanePhaseData = this.LanePhaseData.map(data => ({
            ...data,
            color: this.phaseControlColorMap.get(Control)
          }))
          this.LanePhaseData = JSON.parse(JSON.stringify(LanePhaseData))
        }
      }
    },
    createPhaseStatusMap () {
      // 生成相位id和相位状态对应数据结构
      this.phaseStatusList.map(phase => {
        let phaseId = phase.id
        let phaseInfo = {
          type: phase.type,
          phaseCountdown: phase.countdown,
          pedtype: phase.pedtype
        }
        this.phaseStatusMap.set(phaseId, phaseInfo)
      })
    },
    getYellowFlashColor () {
      // 车道相位（左行右行）
      let curLanePhaseData = []
      for (let i = 0; i < this.compLanePhaseData.length; i++) {
        const data = {
          ...this.compLanePhaseData[i],
          type: '黄闪',
          control: 1
        }
        curLanePhaseData.push(data)
      }
      this.compLanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))

      // 行人相位
      let curPedStatus = []
      for (let i = 0; i < this.compSidewalkPhaseData.length; i++) {
        const data = {
          ...this.compSidewalkPhaseData[i],
          pedtype: '黄闪',
          control: 1
        }
        curPedStatus.push(data)
      }
      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))

      // 公交相位
      let curBusLanePhaseData = []
      for (let i = 0; i < this.comdireBusPhaseData.length; i++) {
        const data = {
          ...this.comdireBusPhaseData[i],
          type: '黄闪',
          control: 1
        }
        curBusLanePhaseData.push(data)
      }
      this.comdireBusPhaseData = JSON.parse(JSON.stringify(curBusLanePhaseData))

      if (this.mainType === '103') {
        // 匝道相位
        if (this.LanePhaseData.length) {
          const LanePhaseData = this.LanePhaseData.map(data => ({
            ...data,
            type: '黄闪',
            control: 1
          }))
          this.LanePhaseData = JSON.parse(JSON.stringify(LanePhaseData))
        }
      }
    },
    getPhaseStatus () {
      // 得到车道相位状态（颜色）
      this.comdirePhaseData = []
      let curLanePhaseData = []
      for (let i = 0; i < this.LanePhaseData.length; i++) {
        let curPhaseStatus = this.phaseStatusMap.get(this.LanePhaseData[i].phaseid)
        if (!curPhaseStatus) continue
        const data = {
          ...this.LanePhaseData[i],
          type: curPhaseStatus.type,
          color: this.ColorMap.get(curPhaseStatus.type),
          phaseCountdown: curPhaseStatus.phaseCountdown,
          flag: 'phase' // 车道相位数据标识
        }
        curLanePhaseData.push(data)
      }
      this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
      // 处理相位数据中，方向direction重复的情况：相同direction下，按照状态的优先级显示该方向的灯色：绿灯(3) > 绿闪(4) > 黄灯(2) > 红灯(1)
      // 如果有相同direction，处理后会改变原数组长度，导致第二次无法正确比较状态，因此需要中间变量存储
      this.comdirePhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compareRepeatDirection(this.LanePhaseData, 'type', 'phase')))
    },
    getOverlapPhaseStatus () {
      // 得到车道跟随相位状态（颜色）
      this.comdireOverlapPhaseData = []
      if (this.overlapStatusList) {
        this.overlapStatusList.map(phase => {
          let phaseId = phase.id
          let phaseInfo = {
            type: phase.type,
            phaseCountdown: phase.countdown,
            pedtype: phase.pedtype
          }
          this.overlapPhaseStatusMap.set(phaseId, phaseInfo)
        })
      }
      let curLanePhaseData = []
      for (let i = 0; i < this.overlapLanePhaseData.length; i++) {
        let curPhaseStatus = this.overlapPhaseStatusMap.get(this.overlapLanePhaseData[i].phaseid)
        if (!curPhaseStatus) continue
        const data = {
          ...this.overlapLanePhaseData[i],
          type: curPhaseStatus.type,
          color: this.ColorMap.get(curPhaseStatus.type),
          phaseCountdown: curPhaseStatus.phaseCountdown,
          flag: 'overlapphase' // 车道跟随相位数据标识
        }
        curLanePhaseData.push(data)
      }
      this.overlapLanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
      // 处理跟随相位数据中，方向direction重复的情况：相同direction下，按照状态的优先级显示该方向的灯色：绿灯(3) > 绿闪(4) > 黄灯(2) > 红灯(1)
      // 如果有相同direction，处理后会改变原数组长度，导致第二次无法正确比较状态，因此需要中间变量存储
      this.comdireOverlapPhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compareRepeatDirection(this.overlapLanePhaseData, 'type', 'overlapphase')))
    },
    getBusPhaseStatus () {
      // 得到公交车道相位状态（颜色）
      this.comdireBusPhaseData = []
      let curLanePhaseData = []
      for (let i = 0; i < this.busPhaseData.length; i++) {
        let curPhaseStatus = this.phaseStatusMap.get(this.busPhaseData[i].phaseid)
        if (!curPhaseStatus) continue
        const data = {
          ...this.busPhaseData[i],
          type: curPhaseStatus.type,
          color: this.ColorMap.get(curPhaseStatus.type),
          phaseCountdown: curPhaseStatus.phaseCountdown,
          flag: 'busphase' // 车道相位数据标识
        }
        curLanePhaseData.push(data)
      }
      this.busPhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
      // 处理相位数据中，方向direction重复的情况：相同direction下，按照状态的优先级显示该方向的灯色：绿灯(3) > 绿闪(4) > 黄灯(2) > 红灯(1)
      // 如果有相同direction，处理后会改变原数组长度，导致第二次无法正确比较状态，因此需要中间变量存储
      this.comdireBusPhaseData = JSON.parse(JSON.stringify(this.CrossDiagramMgr.compareRepeatDirection(this.busPhaseData, 'type', 'busphase')))
    },
    getCurPhaseCountdown () {
      // 获取当前相位倒计时颜色
      this.phaseCountdownList = []
      this.isHasCountdown = false
      this.curPhase.forEach(curP => {
        this.phaseStatusList.forEach(phaseInfo => {
          if (phaseInfo.id === curP) {
            let countdownObj = {}
            countdownObj.id = phaseInfo.id
            countdownObj.phaseCountdown = phaseInfo.countdown
            countdownObj.phaseCountdownColor = this.ColorMap.get(phaseInfo.type)
            let curphasedir = this.phaseDirMap.get(phaseInfo.id)
            if (curphasedir !== undefined) {
              countdownObj.showlist = curphasedir.direction.map(dir => {
                return {
                  id: dir,
                  peddirection: this.getshowped(curphasedir.peddirection),
                  color: '#fff'
                }
              })
            } else {
              countdownObj.showlist = []
            }

            this.phaseCountdownList.push(countdownObj)
            if (phaseInfo.countdown !== undefined && phaseInfo.countdown !== -1) {
              this.isHasCountdown = true
            }
          }
        })
      })
    },
    getshowped (peddirection) {
      let peddirarr = peddirection.map(peddir => ({
        id: peddir,
        name: this.PhaseDataModel.getSidePos(peddir).name,
        color: 'rgba(255, 255, 255, 0.4)'
      }))
      return peddirarr
    },
    getIntersectionInfo () {
      // 获取路口信息
      const agentid = this.agentId
      getIntersectionInfo(agentid).then(res => {
        if (!res.data.success) {
          this.isLoaded = false
          let commomMsg = this.$t('openatccomponents.overview.signalID') + ' : ' + agentid
          let msg = getMessageByCode(res.data.code, this.$i18n.locale)
          if (res.data.data) {
            // 子类型错误
            let childErrorCode = res.data.data.errorCode
            if (childErrorCode) {
              let childerror = getMessageByCode(res.data.data.errorCode, this.$i18n.locale)
              msg = msg + ' - ' + childerror
            }
          }
          msg = msg + ' - ' + commomMsg
          this.$message.error(msg)
          return
        }
        this.isLoaded = true
        this.tempType = res.data.data.type
        // 获取车道相位、行人相位信息（坐标、名称）
        this.mainType = this.tempType.split('-')[0]
        this.mainDirection = this.tempType.split('-')[1]
        if (this.isVipRoute && !this.isThirdSignal) {
          // 特勤、分组管控下，非第三方设备，按通道显示相位方向；第三方设备还是按路口相位配置显示相位方向
          this.getChannelInfo()
          return
        }
        if (this.channelType && !this.isThirdSignal) {
          this.getChannelInfo()
          return
        }
        this.getTempCrossInfo(res)
      })
    },
    getTempCrossInfo (res) {
      this.crossInfo = res.data.data.param
      this.crossInfo.phaseList.forEach(cross => this.phaseDirMap.set(cross.id, {direction: cross.direction, peddirection: cross.peddirection}))
      if (this.mainType === '100' || this.mainType === '101' || this.mainType === '104') {
        // 城市道路加载车道相位坐标和人行道坐标
        this.getPhasePos()
        this.getOverlapPhasePos()
        this.getPedPhasePos()
        this.getOverlapPedPhasePos()
        if (!this.isVipRoute) {
          this.getBusPos()
        }
      }
      if (!this.isVipRoute && this.mainType === '103') {
        // 获取匝道道路的主路和支路的相位坐标
        this.getRampPhasePos()
      }
      if (!this.isVipRoute) {
        this.drawDefaultPhaseIcon()
      }
      if (this.isVipRoute && this.isThirdSignal) {
        this.LanePhaseData = this.CrossDiagramMgr.compare(this.LanePhaseData, this.overlapLanePhaseData, 'type', 'nostatus')
        // console.log(this.LanePhaseData)
        this.sidewalkPhaseData = this.CrossDiagramMgr.compare(this.sidewalkPhaseData, this.overlapsidewalkPhaseData, 'pedtype', 'nostatus')
        let allDir = this.LanePhaseData.map(ele => ele.id)
        let allPedDir = this.sidewalkPhaseData.map(ele => ele.id)
        this.inneChoosedDirection = this.choosedDirection.filter(dir => allDir.indexOf(dir) !== -1)
        this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => allPedDir.indexOf(dir) !== -1)
        this.drawPhaseIcon()
      }
    },
    getBusPos () {
      // 公交相位信息
      this.busPhaseData = []
      this.crossInfo.phaseList.forEach((ele, i) => {
        if (ele.controltype >= 3 && ele.controltype <= 6) {
          ele.direction.forEach((dir, index) => {
          // 车道相位
            this.busPhaseData.push({
              key: this.CrossDiagramMgr.getUniqueKey('busphase'),
              phaseid: ele.id, // 相位id，用于对应相位状态
              id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
              name: this.PhaseDataModel.getBusPhasePos(dir).name,
              left: this.PhaseDataModel.getBusPhasePos(dir).x,
              top: this.PhaseDataModel.getBusPhasePos(dir).y,
              busleft: this.PhaseDataModel.getBusMapPos(dir).x,
              bustop: this.PhaseDataModel.getBusMapPos(dir).y,
              controltype: ele.controltype
            })
          })
        }
      })
      // 去掉重复方向的数据
      this.busPhaseData = Array.from(new Set(this.busPhaseData.map(item => item.id)))
        .map(id => this.busPhaseData.find(item => item.id === id))
    },
    createRandomType () {
      for (var i = 3; i <= 5; i++) {
        return Math.floor(Math.random() * (5 - 3)) + 3
      }
    },
    getPhasePos () {
      // 车道相位信息
      this.LanePhaseData = []
      this.crossInfo.phaseList.forEach((ele, i) => {
        if (ele.controltype === undefined || ele.controltype <= 2) {
          ele.direction.forEach((dir, index) => {
          // 车道相位
            this.LanePhaseData.push({
              key: this.CrossDiagramMgr.getUniqueKey('phase'),
              phaseid: ele.id, // 相位id，用于对应相位状态
              id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
              name: this.PhaseDataModel.getPhase(dir).name,
              left: this.PhaseDataModel.getPhase(dir).x,
              top: this.PhaseDataModel.getPhase(dir).y
            })
          })
        }
      })
      // 去掉重复方向的数据
      this.LanePhaseData = Array.from(new Set(this.LanePhaseData.map(item => item.id)))
        .map(id => this.LanePhaseData.find(item => item.id === id))
    },
    getOverlapPhasePos () {
      // 车道跟随相位信息
      if (!this.crossInfo.overlaplList) return
      this.overlapLanePhaseData = []
      this.crossInfo.overlaplList.forEach((ele, i) => {
        if (ele.direction) {
          ele.direction.forEach((dir, index) => {
            this.overlapLanePhaseData.push({
              key: this.CrossDiagramMgr.getUniqueKey('overlapphase'),
              phaseid: ele.id, // 相位id，用于对应相位状态
              id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
              name: this.PhaseDataModel.getPhase(dir).name,
              left: this.PhaseDataModel.getPhase(dir).x,
              top: this.PhaseDataModel.getPhase(dir).y
            })
          })
        }
      })
      // 去掉重复方向的数据
      this.overlapLanePhaseData = Array.from(new Set(this.overlapLanePhaseData.map(item => item.id)))
        .map(id => this.overlapLanePhaseData.find(item => item.id === id))
    },
    getRampPhasePos () {
      // 匝道车道相位信息
      this.LanePhaseData = []
      this.crossInfo.phaseList.forEach((ele, i) => {
        ele.direction.forEach((dir, index) => {
          if (ele.controltype === 0) {
            this.handleRampPhasePosData(`${i}-${index}`, ele, dir, this.PhaseDataModel.getMainPhasePos)
          }
          if (ele.controltype === 1) {
            this.handleRampPhasePosData(`${i}-${index}`, ele, dir, this.PhaseDataModel.getSidePhasePos)
          }
        })
      })
      // 去掉重复方向的数据
      this.LanePhaseData = Array.from(new Set(this.LanePhaseData.map(item => item.id)))
        .map(id => this.LanePhaseData.find(item => item.id === id))
    },
    handleRampPhasePosData (key, phase, dir) {
      let posInfo = phase.controltype === 0 ? this.PhaseDataModel.getMainPhasePos(dir) : this.PhaseDataModel.getSidePhasePos(dir)
      this.LanePhaseData.push({
        key,
        controlType: phase.controltype,
        phaseid: phase.id, // 相位id，用于对应相位状态
        id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
        name: posInfo.name,
        left: posInfo.x,
        top: posInfo.y
      })
    },
    getPedPhasePos () {
      // 行人相位信息
      this.sidewalkPhaseData = []
      this.crossInfo.phaseList.forEach((ele, i) => {
        if (ele.peddirection) {
          ele.peddirection.forEach((dir, index) => {
          // 行人相位
            if (this.PhaseDataModel.getSidePos(dir)) {
              let key = this.CrossDiagramMgr.getUniqueKey('pedphase')
              if (this.isVipRoute && this.isThirdSignal) {
                key = this.CrossDiagramMgr.getUniqueKey('pedphase') + `-${this.agentId}`
              }
              this.sidewalkPhaseData.push({
                key,
                phaseid: ele.id, // 相位id，用于对应相位状态
                id: dir,
                name: this.PhaseDataModel.getSidePos(dir).name,
                left: this.PhaseDataModel.getSidePos(dir).x,
                top: this.PhaseDataModel.getSidePos(dir).y
              })
            }
          })
        }
      })
      // 去掉重复方向的数据
      this.sidewalkPhaseData = Array.from(new Set(this.sidewalkPhaseData.map(item => item.id)))
        .map(id => this.sidewalkPhaseData.find(item => item.id === id))
    },
    getOverlapPedPhasePos () {
      // 行人跟随相位信息
      if (!this.crossInfo.overlaplList) return
      this.overlapsidewalkPhaseData = []
      this.crossInfo.overlaplList.forEach((ele, i) => {
        if (ele.peddirection) {
          ele.peddirection.forEach((dir, index) => {
            if (this.PhaseDataModel.getSidePos(dir)) {
              this.overlapsidewalkPhaseData.push({
                key: this.CrossDiagramMgr.getUniqueKey('overlappedphase'),
                phaseid: ele.id, // 相位id，用于对应相位状态
                id: dir,
                name: this.PhaseDataModel.getSidePos(dir).name,
                left: this.PhaseDataModel.getSidePos(dir).x,
                top: this.PhaseDataModel.getSidePos(dir).y
              })
            }
          })
        }
      })
      // 去掉重复方向的数据
      this.overlapsidewalkPhaseData = Array.from(new Set(this.overlapsidewalkPhaseData.map(item => item.id)))
        .map(id => this.overlapsidewalkPhaseData.find(item => item.id === id))
    },
    getCrossType () {
      // 路口类型对应底图决策
      if (this.mainType === '101') {
        // 十字路口
        this.crossType = 'Crossroads'
      }
      if (this.mainType === '100') {
        // T型路口
        switch (this.mainDirection) {
          case '001': this.crossType = 'TypeT-east'
            break
          case '002': this.crossType = 'TypeT-south'
            break
          case '003': this.crossType = 'TypeT-west'
            break
          case '004': this.crossType = 'TypeT-north'
            break
        }
      }
      if (this.mainType === '103') {
        // 匝道
        switch (this.mainDirection) {
          case '001': this.crossType = 'ramp-east'
            break
          case '002': this.crossType = 'ramp-south'
            break
          case '003': this.crossType = 'ramp-west'
            break
          case '004': this.crossType = 'ramp-north'
            break
        }
      }
      if (this.mainType === '104') {
        // 路段行人过街
        switch (this.mainDirection) {
          case '005': this.crossType = 'ped-section-east-west'
            break
          case '006': this.crossType = 'ped-section-south-north'
            break
        }
      }
      if (this.mainType === '999') {
        // 其他路口
        this.crossType = 'Customroads'
      }
    },
    refresh () {
      this.getIntersectionInfo()
    },
    getpedStatus () {
      // 行人相位状态
      let curPedStatus = []
      for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
        if (this.sidewalkPhaseData[i].phaseid) {
          let curPhaseStatus = this.phaseStatusMap.get(this.sidewalkPhaseData[i].phaseid)
          if (!curPhaseStatus) continue
          const data = {
            ...this.sidewalkPhaseData[i],
            pedtype: curPhaseStatus.pedtype,
            color: this.SidewalkColorMap.get(curPhaseStatus.pedtype),
            flag: 'ped' // 行人相位数据标识
          }
          curPedStatus.push(data)
        } else {
          // 无状态的行人道
          const data = {
            ...this.sidewalkPhaseData[i],
            pedtype: undefined
          }
          curPedStatus.push(data)
        }
      }
      this.sidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
    },
    getOverlapPedStatus () {
      // 行人跟随相位状态
      let curPedStatus = []
      for (let i = 0; i < this.overlapsidewalkPhaseData.length; i++) {
        if (this.overlapsidewalkPhaseData[i].phaseid) {
          let curPhaseStatus = this.overlapPhaseStatusMap.get(this.overlapsidewalkPhaseData[i].phaseid)
          if (!curPhaseStatus) {
            // 无状态的行人道,也显示出来
            const data = {
              ...this.overlapsidewalkPhaseData[i],
              pedtype: undefined
            }
            curPedStatus.push(data)
            continue
          }
          const data = {
            ...this.overlapsidewalkPhaseData[i],
            pedtype: curPhaseStatus.pedtype,
            color: this.SidewalkColorMap.get(curPhaseStatus.pedtype),
            flag: 'overlapped' // 行人跟随相位数据标识
          }
          curPedStatus.push(data)
        } else {
          // 无状态的行人道
          const data = {
            ...this.overlapsidewalkPhaseData[i],
            pedtype: undefined
          }
          curPedStatus.push(data)
        }
      }
      this.overlapsidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
    },
    getRoadDirection () {
      // 获取行车方向（从平台或配置工具的配置文件中读取）
      this.roadDir = this.roadDirection
    },
    getChannelInfo () {
      uploadSingleTscParam('channel', this.agentId).then(data => {
        let res = data.data
        if (!res.success) {
          if (res.code === '4003') {
            this.$message.error(this.$t('openatccomponents.errorTip.devicenotonline'))
            return
          }
          this.$message.error(getMessageByCode(data.data.code, this.$i18n.locale))
          return
        }
        let channelList = res.data.data.channelList.filter(ele => ele.type !== undefined)
        this.channelList = this.handleRepeatRealdir(channelList)
        console.log('this.channelList', this.channelList)
        this.handleChannelDirection()
      })
    },
    handleRepeatRealdir (channelList) {
      // 按realdir去掉重复方向的数据
      let dirChannelList = channelList.filter(ele => ele.realdir !== undefined && (ele.type === 0 || ele.type === 1 || ele.type === 3))
      let pedDirChannelList = channelList.filter(ele => ele.realdir !== undefined && ele.type === 2)
      let map = new Map()
      let map2 = new Map()
      dirChannelList.forEach(ele => {
        ele.realdir.forEach(dir => {
          if (map.get(dir) === undefined) {
            map.set(dir, ele)
          }
        })
      })
      pedDirChannelList.forEach(ele => {
        ele.realdir.forEach(dir => {
          if (map2.get(dir) === undefined) {
            map2.set(dir, ele)
          }
        })
      })
      let arr = Array.from(map)
      let pedarr = Array.from(map2)
      let newarr = []
      arr.forEach(ele => {
        ele[1].realdir = [ele[0]]
        let obj = {
          ...ele[1],
          realdir: [ele[0]]
        }
        newarr.push(obj)
      })
      pedarr.forEach(ele => {
        ele[1].realdir = [ele[0]]
        let obj = {
          ...ele[1],
          realdir: [ele[0]]
        }
        newarr.push(obj)
      })
      // console.log(newarr)
      return newarr
    },
    handleChannelDirection () {
      this.LanePhaseData = []
      this.sidewalkPhaseData = []
      this.sidewalkDir = []
      let realphasedirarr = []
      let realpeddirarr = []
      this.channelList.forEach((ele, i) => {
        if (ele.type === 0 || ele.type === 1 || ele.type === 3) {
          if (ele.realdir) {
            ele.realdir.forEach((dir, index) => {
            // 车道相位（通道类型是机动车，非机动车，公交时，对应相位机动车）
              this.LanePhaseData.push({
                key: this.CrossDiagramMgr.getUniqueKey('phase'),
                channelid: ele.id, // 通道id
                id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
                name: this.PhaseDataModel.getPhase(dir).name,
                left: this.PhaseDataModel.getPhase(dir).x,
                top: this.PhaseDataModel.getPhase(dir).y
              })
            })
            realphasedirarr = Array.from(new Set(realphasedirarr.concat(ele.realdir)))
          }
        }
        if (ele.type === 2) {
          if (ele.realdir) {
            ele.realdir.forEach((dir, index) => {
              // 行人相位
              if (this.sidewalkDir.indexOf(dir) === -1 && this.PhaseDataModel.getSidePos(dir)) {
                let obj = {
                  key: this.CrossDiagramMgr.getUniqueKey('pedphase') + `-${this.agentId}`,
                  channelid: ele.id, // 通道id
                  id: dir,
                  name: this.PhaseDataModel.getSidePos(dir).name
                }
                if (this.channelType) {
                  obj.left = this.PhaseDataModel.getSidePos(dir).x
                  obj.top = this.PhaseDataModel.getSidePos(dir).y
                }
                this.sidewalkPhaseData.push(obj)
              }
            })
            realpeddirarr = Array.from(new Set(realpeddirarr.concat(ele.realdir)))
            this.sidewalkDir = Array.from(new Set([...this.sidewalkDir.concat(ele.realdir)]))
          }
        }
      })
      this.inneChoosedDirection = this.choosedDirection.filter(dir => realphasedirarr.indexOf(dir) !== -1)
      this.inneChoosedPedDirection = this.choosedPedDirection.filter(dir => realpeddirarr.indexOf(dir) !== -1)
      this.drawPhaseIcon()
    },
    async drawPhaseIcon () {
      const targetIds = [4, 8, 12, 16] // 掉头相位后画
      this.LanePhaseData = this.LanePhaseData.filter(item => !targetIds.includes(item.id)).concat(this.LanePhaseData.filter(item => targetIds.includes(item.id)))
      if (!this.isThirdSignal && this.isVipRoute) {
        await this.getConflictList()
        this.handleClickedPhase()
        this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
        this.handleClickedPedPhase()
        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.sidewalkPhaseData))
      } else {
        // 第三方信号机不需要处理冲突关系
        this.handleClickedPhase()
        this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
        this.handleClickedPedPhase()
        this.compSidewalkPhaseData = JSON.parse(JSON.stringify(this.sidewalkPhaseData))
      }
    },
    handleClickedPhase () {
      if (!this.isThirdSignal) {
        this.inneChoosedDirection = this.inneChoosedDirection.filter(dir => this.phaseConflictList.indexOf(dir) === -1)
      }
      for (let index = 0; index < this.LanePhaseData.length; index++) {
        const element = this.LanePhaseData[index]
        if (this.inneChoosedDirection.indexOf(element.id) !== -1) {
          element.clicked = true
        }
      }
    },

    handleClickPhaseIcon (key, action) {
      let curClickedPhase = {}
      if (action === 'clicked') {
        for (let index = 0; index < this.LanePhaseData.length; index++) {
          const element = this.LanePhaseData[index]
          if (element.key === key) {
            element.clicked = true
            curClickedPhase = JSON.parse(JSON.stringify(element))
          }
        }
      }
      if (action === 'cancle') {
        for (let index = 0; index < this.LanePhaseData.length; index++) {
          const element = this.LanePhaseData[index]
          if (element.key === key) {
            delete element.clicked
          }
        }
      }
      this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
      let clickedDirection = this.compLanePhaseData.filter(ele => ele.clicked && !ele.disabled)
      this.inneChoosedDirection = clickedDirection.map(ele => ele.id)
      this.EmitAllChoosedDirection(curClickedPhase)
    },
    handleClickedPedPhase () {
      if (!this.isThirdSignal) {
        this.inneChoosedPedDirection = this.inneChoosedPedDirection.filter(dir => this.pedConflictList.indexOf(dir) === -1)
      }
      // 排他
      for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
        const element = this.sidewalkPhaseData[index]
        delete element.clicked
      }
      for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
        const element = this.sidewalkPhaseData[index]
        if (this.inneChoosedPedDirection.indexOf(element.id) !== -1) {
          element.clicked = true
        }
      }
    },
    handleClickSidewalkIcon (data, curChoosePed) {
      this.clickedPedDirection = data.filter(ele => ele.clicked && !ele.disabled)
      this.inneChoosedPedDirection = this.clickedPedDirection.map(ele => ele.id)
      this.EmitAllChoosedDirection(curChoosePed)
    },
    EmitAllChoosedDirection (curClickedPhase) {
      let allChoosedDir = {
        direction: this.inneChoosedDirection,
        peddirection: this.inneChoosedPedDirection
      }
      this.$emit('handleClickCrossIcon', allChoosedDir, curClickedPhase)
      this.drawPhaseIcon()
    },
    async getConflictList () {
      let ConflictList = new CrossDirectionConflictList(this.agentId)
      return ConflictList.getConflictListByAgentid().then(res => {
        if (res) {
          let conflictList = ConflictList.getListDirConflict(this.inneChoosedDirection, this.inneChoosedPedDirection)
          this.phaseConflictList = conflictList.allConflictDir
          this.pedConflictList = conflictList.allPedConflictDir
          // 排他
          for (let index = 0; index < this.LanePhaseData.length; index++) {
            const element = this.LanePhaseData[index]
            delete element.disabled
          }
          for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
            const element = this.sidewalkPhaseData[index]
            delete element.disabled
          }
          for (let index = 0; index < this.LanePhaseData.length; index++) {
            const element = this.LanePhaseData[index]
            if (this.phaseConflictList.indexOf(element.id) !== -1) {
              element.disabled = true
            }
          }
          for (let index = 0; index < this.sidewalkPhaseData.length; index++) {
            const element = this.sidewalkPhaseData[index]
            if (this.pedConflictList.indexOf(element.id) !== -1) {
              element.disabled = true
            }
          }
          // console.log(this.LanePhaseData)
        }
      })
    },
    createChannelStatusMap () {
      // 生成相位id和相位状态对应数据结构
      this.channelStatusList.map(channel => {
        let channelId = channel.id
        let channelInfo = {
          light: channel.light
        }
        this.channelStatusMap.set(channelId, channelInfo)
      })
    },
    getChannelPhaseStatus () {
      // 通道相位机动车状态
      this.comdirePhaseData = []
      let curLanePhaseData = []
      for (let i = 0; i < this.LanePhaseData.length; i++) {
        let curPhaseStatus = this.channelStatusMap.get(this.LanePhaseData[i].channelid)
        if (!curPhaseStatus) continue
        const data = {
          ...this.LanePhaseData[i],
          type: curPhaseStatus.light,
          color: this.ColorMap.get(curPhaseStatus.light),
          flag: 'phasechannel' // 车道相位数据标识
        }
        curLanePhaseData.push(data)
      }
      this.LanePhaseData = JSON.parse(JSON.stringify(curLanePhaseData))
      this.compLanePhaseData = JSON.parse(JSON.stringify(this.LanePhaseData))
    },
    getChannelPedStatus () {
      // 通道行人相位状态
      let curPedStatus = []
      for (let i = 0; i < this.sidewalkPhaseData.length; i++) {
        console.log(this.sidewalkPhaseData[i])
        if (this.sidewalkPhaseData[i].channelid) {
          let curPhaseStatus = this.channelStatusMap.get(this.sidewalkPhaseData[i].channelid)
          if (!curPhaseStatus) continue
          const data = {
            ...this.sidewalkPhaseData[i],
            pedtype: curPhaseStatus.light,
            color: this.ColorMap.get(curPhaseStatus.light),
            flag: 'pedchannel' // 行人相位数据标识
          }
          curPedStatus.push(data)
        } else {
          // 无状态的行人道
          const data = {
            ...this.sidewalkPhaseData[i],
            pedtype: undefined
          }
          curPedStatus.push(data)
        }
      }
      this.compSidewalkPhaseData = JSON.parse(JSON.stringify(curPedStatus))
    }
  },
  mounted () {
    // this.init()
  }
}
</script>
<style scoped>
.invisible {
  visibility: hidden;
}
.crossImg{
    position: relative;
    width: 870px;
    height: 650px;
    left: 50%;
    transform: translateX(-50%);
}
.centerText {
  position: absolute;
  width: 140px;
  height: 140px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  /* text-align: center; */
  z-index: 9;
  display: flex;
  align-items: center;
  /* padding-left: 16px; */
}
.phaseCountdown {
  line-height: 42PX;
  font-size: 18px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #fff;
  width: 150px;
  margin: 0 auto;
}
.countdownBg {
  border-radius: 10PX;
  background-color: rgba(94, 90, 90, 0.8);
  padding-left: 14PX;
  padding-top: 10PX;
  padding-bottom: 10PX;
}
.centerText .text {
  display: inline-block;
  color: #299BCC;
  margin-top: 20PX;
}

.baseImg {
    width: 100%;
    height: 650px;
    position: relative;
}
</style>
